<template>
	<view class="container">
		<view class="topic-wrap u-p-30">
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item label="标题(选填)" label-position="top" prop="title">
					<u-input v-model="model.title" />
				</u-form-item>
				<u-form-item :border-bottom="false" prop="content">
					<textarea placeholder="写点什么吧..." v-model="model.content" class="post-txt"></textarea>
				</u-form-item>
			</u-form>
			<view class="u-m-b-60">
				<u-form-item label="选择圈子" label-width="auto" prop="topic_name">
					<u-input input-align="right" v-model="model.topic_name" @click="show = true" placeholder="请选择"
						type="select" />
				</u-form-item>
			</view>
			
			
			<!--上传-->
			<view v-if="model.type ==1">
				<u-form-item :border-bottom="false" prop="pen">
					<u-upload :form-data="formData" :showProgress="false" @on-uploaded="uploadSuccess"
						@on-remove="uploadRemove" :action="action" width="140" height="140" maxCount="9">
					</u-upload>
				</u-form-item>
			</view>
			<view v-if="model.type==2">
				<view v-if="model.video.length == 0" class="upload-wrap" @click="chooseVideo">
					<image class="icon" src="/static/video.png"></image>
					<text>上传视频</text>
				</view>
				<video v-if="model.video.length > 0" @click="chooseVideo" :controls="false"
					:show-center-play-btn="false" class="upload-video" :src="$util.img(model.video)"></video>
			</view>
			<view v-if="model.type==3">
				这是任务，留空
			</view>
			<!--选择定位-->
			<view @click="chooseLocation" class="choose-item">
				<u-icon class="icon" name="map" color="#999" size="40"></u-icon>
				<text class="txt">{{model.address || "所在位置"}}</text>
				<u-icon class="u-icon" name="arrow-right"></u-icon>
			</view>
		</view>

		<!-- 分类选择器 -->
		<u-select v-model="show" value-name='topic_id' label-name='topic_name' mode="single-column" :list="cateList"
			@confirm="confirm"></u-select>
		<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>
		<!--提交按钮-->
		<view class="f-fixed u-padding-20">
			<u-button @click="save" shape="circle" type="primary" :custom-style="customStyle">发布</u-button>
		</view>
	</view>
</template>

<script>
	import Config from '../../../common/js/config.js'
	export default {
		data() {
			return {
				action: 'https://qq.cdbendi.com/' + 'social/api/social/plusimage',
				formData: {},
				show: false,
				model: {
					title: '',
					content: '',
					topic_id: '',
					topic_name: '',
					media: [],
					video:'',
					address: '', //门店地址
					latitude: '', //纬度
					longitude: '', //经度
					type: 1,
				},
				rules: {
					title: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
				},
				media: "",
				memberName: "",
				memberNeadimg: "",
				memberId: "",
				imgList: [],
				cateList: [],
				header: {
					token: uni.getStorageSync('token')
				},
				customStyle: {
					backgroundColor: '#262239'
				},


			}
		},
		onLoad(data) {
			//帖子发布类型传值
			this.model.type = data.type;
			//图片上传参数
			this.formData = {
				token: uni.getStorageSync('token'),
				app_type: 'weapp',
				app_type_name: '微信小程序',
				site_id: Config.siteId
			}
			this.getCircle();
			this.getUserInfo();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
	
			//用户信息
			getUserInfo() {
				this.$api.sendRequest({
					url: '/api/member/info',
					success: res => {
						if (res.code == 0) {
							this.memberName = res.data.nickname;
							this.memberNeadimg = res.data.headimg;
							this.memberId = res.data.member_id;
						} else {
							this.$util.showToast({
								title: res.message
							})
						}
					}
				});
			},
			//获取圈子列表
			getCircle() {
				this.showEmpty = false;
				this.$api.sendRequest({
					url: '/social/api/social/circlecate',
					success: res => {
						this.showEmpty = true;
						if (res.code == 0) {
							if (res.data.length != 0) {
								this.cateList = res.data;
							}
						} else {
							this.$util.showToast({
								title: res.message
							});
						}
					},
					fail: res => {
						mescroll.endErr();
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			//确定圈子
			confirm(e) {
				this.model.topic_id = e[0].value;
				this.model.topic_name = e[0].label;
			},
			//图片发布成功
			uploadSuccess(e) {
				this.model.media = [];
				e.forEach(item => {
					this.model.media.push(item.response.data.pic_path);
				});
				console.log(this.images)
			},
			// 移除图片
			uploadRemove(index) {
				this.model.media.splice(index, 1);
			},
			//获取地理位置
			chooseLocation() {
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						that.model.address = res.name;
						that.model.latitude = res.latitude;
						that.model.longitude = res.longitude;
					}
				});
			},
			//发布话题
			save() {
				let data = {
					title: this.model.title,
					content: this.model.content,
					media: this.model.media,
					video:this.model.video,
					address: this.model.address,
					topic_id: this.model.topic_id,
					topic_name: this.model.topic_name,
					member_name: this.memberName,
					member_headimg: this.memberNeadimg,
					member_id: this.memberId,
					type: this.model.type
				};
				this.$api.sendRequest({
					url: '/social/api/social/add',
					data: data,
					success: res => {
						if (res.code == 0) {
							this.$util.showToast({
								title: "帖子发布成功"
							});
							setTimeout(() => {
								this.$util.redirectTo('/newpages/social/index', {}, "redirectTo");
							}, 1000);

						} else {
							this.$util.showToast({
								title: res.message
							});
							this.flag = false;
						}
					},
					fail: res => {
						this.flag = false;
					}
				})
			},

			//上传视频
			chooseVideo() {
				var self = this;
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: function(res) {
						let viedoPath = res.tempFilePath;

						uni.showLoading({
							mask: true,
							title: '上传中'
						});

						uni.uploadFile({
							url: 'https://qq.cdbendi.com/' +
								'social/api/social/video?site_id=' +
								Config.siteId,
							filePath: viedoPath,
							name: 'file',
							header: {
								token: uni.getStorageSync('token'),
								app_type: 'weapp',
								app_type_name: '%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F',
							},
							success: uploadFileRes => {
								let upData = JSON.parse(uploadFileRes.data);
								//console.log(upData);
								console.log(upData.data.path)
								if (upData.code == 10066) {
									self.model.video = upData.data.path
								}
							},
							complete() {
								uni.hideLoading();
							}
						});
					}
				});
			},


		}
	}
</script>

<style lang="scss">
	.container {
		background: #FFF;
		height: 100vh;
	}

	.area-box {
		width: 690rpx;
		min-height: 306rpx;
		background: rgba(249, 250, 251, 1);
		border-radius: 20rpx;
		padding: 20rpx;

		.pl-style {
			font-size: 26rpx;
			font-weight: 500;
			color: rgba(177, 179, 199, 1);
			line-height: 50rpx;
		}

		.inp-area {
			font-size: 26rpx;
			font-weight: 500;
			color: #333;
			line-height: 50rpx;
			width: 100%;
		}

		.img-box {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 20rpx;

		}
	}

	.post-txt {
		width: 100%;
		padding: 20rpx 0;
		min-height: 300rpx;

	}

	.choose-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1px solid #F5F5F5;

		&:last-child {
			border: 0;
		}

		.txt {
			margin-left: 20rpx;
		}

		.icon {
			width: 40rpx;
			height: 40rpx;
		}

		.u-icon {
			margin-left: auto;
			color: #999;
		}
	}

	//视频上传
	.upload-wrap {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 180rpx;
		height: 180rpx;
		background-color: #F5F5F5;
		margin-top: 30rpx;
		border-radius: 10rpx;

		.icon {
			width: 50rpx;
			height: 50rpx;
		}

		text {
			font-size: 24rpx;
		}
	}

	.upload-video {
		width: 180rpx;
		height: 180rpx;
		margin-top: 30rpx;
	}
</style>
